<!-- Modal -->
<div class="modal fade blur-text" id="messages-box" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content panel-default">
      <div class="modal-header panel-heading">
          <div class="with-icon">
                <i class="fa fa-comment"></i>
                <h4 class="h3 message-icon">Messages </h4>
                <span class="badge danger">2</span>
          </div>
        <button type="button" class="close pull-right" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
        <div class="row bind-body">
            <div class="col-md-5 col-sm-5 col-xs-5">
                <div class="popup-search">
                    <form role="search">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search Username ...">
                            <span class="input-group-btn">
                              <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                            </span>
                          </div><!-- /input-group -->
                        </div>
                    </form>
                </div>
                
              <div class="user-list">
                  <ul class="user-messages-list list-unstyled">
                      <li class="unread showmessage">
                          <span class="blured-list">
                              <a href="#" class="thumbnail-user">
                                  <img src="http://www.placehold.it/30x30" width="30px"/>
                              </a>

                          </span>
                          <span class="user-info blured-list">
                              <a href="#">Username</a>
                              <span class="timestamp"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                          </span>
                          <span class="badge danger pull-right">2</span>
                      </li>
                        <li class="unread showmessage">
                          <span class="blured-list">
                              <a href="#" class="thumbnail-user">
                                  <img src="http://www.placehold.it/30x30" width="30px"/>
                              </a>

                          </span>
                          <span class="user-info blured-list">
                              <a href="#">Username</a>
                              <span class="timestamp"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                          </span>
                          <span class="badge danger pull-right">2</span>
                      </li>
                  </ul>
              </div>
            </div><!-- ./col-md-5 col-sm-5 col-xs-5 -->
            <div class="col-md-7 col-sm-7 col-xs-7">
                <div class="message-head showonclick" style="display: none">
                    <span>
                       <a href="#" class="thumbnail-user">
                           <img src="http://www.placehold.it/30x30" width="30px"/>
                       </a>
                   </span>
                   <span class="user-info">
                       <a href="#">Username</a>
                       <span class="timestamp"><i class="fa fa-clock-o"></i> 01/12/13 12:18</span>
                   </span>
                </div>
                <div class="message-body grey">
                    <div class="message-upgrad">
                        <div class="message-title">You have <span>3 unread messages.</span></div>
                        <a class="btn btn-success" href="#">Upgrade Now <i class="fa fa-chevron-circle-right"></i></a>
                        <p class="message-text">Read & Send unlimited messages<br> Find out who's messages you</p>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
